<template>
    <div id="content-box">
        <div class="title">
            <el-form 
            :model="ruleForm"  
            :inline="true" 
            ref="ruleForm" 
            size="mini"
            status-icon
            :rules="rules" 
            >
                <el-form-item label="地级行政区" prop="city">
                    <el-select placeholder="请选择" v-model="ruleForm.city">
                        <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警类型" prop="type">
                    <el-select placeholder="请选择" v-model="ruleForm.type">
                         <el-option  v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime" >
                    <el-date-picker 
                    type="date" 
                    placeholder="选择日期" 
                    v-model="ruleForm.startTime" 
                    style="width: 150px;"
                    value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime" >
                    <el-date-picker 
                    type="date" 
                    placeholder="选择日期" 
                    v-model="ruleForm.endTime" 
                    style="width: 150px;"
                    value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" size="mini" @click="submitForm('ruleForm')">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="warnChart"></div>
    </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      cities: [],
      types: [],
      ruleForm: {
        city: "",
        type: "",
        startTime: "",
        endTime: ""
      },
      rules: {
        startTime: [
          {
            //   需要从date修改为string否则会因为value-format报错
            type: "string",
            required: true,
            message: "请选择开始时间",
            trigger: "change"
          }
        ],
        endTime: [
          {
            type: "string",
            required: true,
            message: "请选择结束时间",
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    // 设置城市
    this.setCities();
    // 设置类型
    this.setType();
    //   设置表格
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      let warnChart = this.$echarts.init(document.getElementById("warnChart"));
      // 绘制图表
      warnChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["有效报警", "已处理报警", "报警总数"]
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: "有效报警",
            type: "bar",
            data: []
          },
          {
            name: "已处理报警",
            type: "bar",
            data: []
          },
          {
            name: "报警总数",
            type: "bar",
            data: []
          }
        ]
      });
    },
    setCities() {
      let _this = this;
      $.ajax({
        methods: "get",
        url: "/api/police/areas/getNowCity?parentId=450000",
        dataType: "json",
        success: function(data) {
          _this.cities = data;
        }
      });
    },
    setType() {
      let _this = this;
      $.ajax({
        methods: "get",
        url: "/api/police/alarms/type/getCombobox",
        dataType: "json",
        success: function(data) {
          _this.types = data;
        }
      });
    },
    setChart(effectiveArr, solvedArr, totalArr, timeArr) {
      let warnChart = this.$echarts.init(document.getElementById("warnChart"));
      let option = {
        xAxis: {
          data: timeArr
        },
        series: [
          {
            name: "有效报警",
            data: effectiveArr
          },
          {
            name: "已处理报警",
            data: solvedArr
          },
          {
            name: "报警总数",
            data: totalArr
          }
        ]
      };
      warnChart.setOption(option);
    },
    submitForm(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          $.ajax({
            methods: "get",
            url:
              "/api/police/alarms/statistics/getStatistics?respType=1&cityCanton=" +
              _this.ruleForm.city +
              "&startTime=" +
              _this.ruleForm.startTime +
              "&endTime=" +
              _this.ruleForm.endTime +
              "&type=" +
              _this.ruleForm.type,
            dataType: "json",
            success: function(data) {
              var effectiveArr = [];
              var solvedArr = [];
              var timeArr = [];
              var totalArr = [];
              for (var i = 0; i < data.data.length; i++) {
                effectiveArr.push(data.data[i].effectiveNum);
                solvedArr.push(data.data[i].solvedNum);
                totalArr.push(data.data[i].totalNum);
                timeArr.push(data.data[i].startTime.substr(0, 10));
              }
              _this.setChart(effectiveArr, solvedArr, totalArr, timeArr);
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
#warnChart {
  width: 1000px;
  height: 800px;
  margin: 0 auto;
}
#content-box >>> .el-input--suffix .el-input__inner {
  padding-right: 0px;
}
</style>
